<script setup lang="ts">
import {getLikeMindedList,addLikeMinded, editLikeMinded, delLikeMinded} from '@/services/user'
import type {LikeMinded , LikeMindedList} from '@/types/user'
import {ref , onMounted , computed} from 'vue'
import {idCardRules , nameRules} from '@/utils/rules'
import {showConfirmDialog,showSuccessToast} from 'vant'


const list = ref<LikeMindedList>([])
const loadList = async () => {
  const res = await getLikeMindedList()
  list.value = res.data
}
onMounted(() => {
  loadList()
})

const options = [
  {
    label:'男',
    value:1
  },
  {
    label:'女',
    value:0
  }
]

const  gender = ref(1)

const show = ref(false)

const LikeMinded = ref<LikeMinded>({
  name:'等等',
  idCard:'230103199012231234',
  gender:1,
  defaultFlag:0
})

// 默认值转换  0 / 1  true / false

const defaultFlag = computed({
  get(){
    return LikeMinded.value.defaultFlag === 1 ? true : false
  },
  set(value){
    LikeMinded.value.defaultFlag = value ? 1 : 0
  }
})


const showPopup=(item?:LikeMinded)=>{
  
  if(item){
    // 是点击了编辑
    const { id , gender , name , idCard , defaultFlag} = item
    LikeMinded.value = {
      id,
      gender,
      name,
      idCard,
      defaultFlag
    }
  }else{
    LikeMinded.value = {...LikeMinded}
  }
  
  show.value = true
}

// 提交时  表单整体校验
const form = ref<FormInstance>()

const onSubmit=async ()=>{
  await  form.value?.validate()  

  // 校验通过
  //性别  选项卡用户手选
  // 身份证号 倒数第二位是性别 单数 男  双数 女
  const gender = LikeMinded.value.idCard.slice(-2,-1) % 2
  if(gender !== LikeMinded.value.gender){
    await showConfirmDialog({
      title:'友情提醒',
      message:'性别与身份证号不匹配,确认要提交吗?'
    })
  }
  // console.log('通过')
  // await addLikeMinded(LikeMinded.value)
  // show.value = false
  // loadList()
  // showSuccessToast('添加成功')

  LikeMinded.value.id ? await editLikeMinded(LikeMinded.value) : await addLikeMinded(LikeMinded.value)
  show.value = false
  loadList()
  showSuccessToast(LikeMinded.value.id ? '编辑成功' : '添加成功')
}

// remove()
// 接口 ----> 重新渲染数据  loadList()
const remove = async () => {
  if (LikeMinded.value.id) {
    await showConfirmDialog({
      title: '友情提醒',
      message: `您确认要删除 ${LikeMinded.value.name} 队友信息吗 ？`
    })
    await delLikeMinded(LikeMinded.value.id)
    show.value = false
    loadList()
    showSuccessToast('删除成功')
  }
}

</script>

<template>
  <!--
  vue2 数据同步 * v-model="num"   或者   xxx.sync  
  语法糖      :value = "num"        @input = "num=$event"
  -->
  <!-- <pk v-model="count"></pk>
  <pk :modelValue="count" @update:modelValue="count=$event"> -->


  <!-- <pk v-model="count"></pk>
  <pk :xxx="count" @update:xxx="count=$event"> -->


  <div class="like-minded-page">
    <pk-nav-bar title="嗯嗯大军"></pk-nav-bar>
    <div class="like-minded-list">

      <div v-for=" item in list" :key="item.id" class="like-minded-item">
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <span class="id">{{ item.idCard.replace(/^(.{6}).+(.{4})$/ , '\$1********\$2') }}</span>
          <!-- <pk-radio-btn :options="options" :modelValue="gender" @update:model-value="gender=$event"></pk-radio-btn> -->
          <span>男</span>
          <span>22岁</span>
        </div>
        <!-- 编辑 -->
        <div class="icon" @click="showPopup(item)"><pk-icon name="user-edit" /></div>
        <div class="tag" v-if="item.defaultFlag === 1">默认</div>
      </div>
      <!-- 添加 -->
      <div class="like-minded-add"  v-if="list.length < 6 " @click="showPopup()">
        <pk-icon name="user-add" />
        <p>添加队友</p>
      </div>
      <div class="like-minded-tip">队伍最多可添加 6 人</div>
    </div>
    <van-popup :show="show" @update:show="show=$event" position="right">
      <pk-nav-bar :back="()=>(show = false)" :title="LikeMinded.id ? '编辑' : '添加'" right-text="保存" @click-right="onSubmit"></pk-nav-bar>
      <van-form autocomplete="off" ref="form">
        <van-field v-model="LikeMinded.name" :rules="nameRules" label="真实姓名" placeholder="请输入真实姓名" />
        <van-field v-model="LikeMinded.idCard" :rules="idCardRules" label="身份证号" placeholder="请输入身份证号" />
        <van-field label="性别" class="pb4">
          <!-- 单选按钮组件 -->
          <template #input>
            <pk-radio-btn v-model="LikeMinded.gender" :options="options"></pk-radio-btn>
          </template>
        </van-field>
        <van-field label="默认角色">
          <template #input>
            <van-checkbox v-model="defaultFlag" :icon-size="18" round />
          </template>
        </van-field>
      </van-form>
      <van-action-bar v-if="LikeMinded.id">
        <van-action-bar-button @click="remove">删除</van-action-bar-button>
      </van-action-bar>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.like-minded-page {
  padding: 46px 0 80px;
  :deep(){
    .van-popup {
      width:80%;
      height: 100%;
    }
    .van-form {
      padding-top: 50px;
    }

    .van-action-bar {
      padding: 0 10px;
      margin-bottom: 10px;
      .van-button {
        color: var(--pk-price);
        background-color: var(--pk-bg);
      }
    }
  }
}
.like-minded-list {
  padding: 15px;
}
.like-minded-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: var(--pk-bg);
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
  border: 1px solid var(--pk-bg);
  transition: all 0.3s;
  overflow: hidden;
  .info {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    span {
      color: var(--pk-tip);
      margin-right: 20px;
      line-height: 30px;
      &.name {
        font-size: 16px;
        color: var(--pk-text1);
        width: 80px;
        margin-right: 0;
      }
      &.id {
        color: var(--pk-text2);
        width: 180px;
      }
    }
  }
  .icon {
    color: var(--pk-tag);
    width: 20px;
    text-align: center;
  }
  .tag {
    position: absolute;
    right: 60px;
    top: 21px;
    width: 30px;
    height: 16px;
    font-size: 10px;
    color: #fff;
    background-color: var(--pk-primary);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &.selected {
    border-color: var(--pk-primary);
    background-color: var(--pk-plain);
    .icon {
      color: var(--pk-primary);
    }
  }
}
.like-minded-add {
  background-color: var(--pk-bg);
  color: var(--pk-primary);
  text-align: center;
  padding: 15px 0;
  border-radius: 8px;
  .pk-icon {
    font-size: 24px;
  }
}
.like-minded-tip {
  color: var(--pk-tag);
  padding: 12px 0;
}
.pb4 {
  padding-bottom: 4px;
}
</style>